<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/assets/libs/kindeditor/themes/default/default.css"/>
    <script src="/assets/js/config.js"></script>
    <link rel="stylesheet" type="text/css" href="css/apply.css"/>

    <script type="text/javascript" src="js/design.js"></script>
    <script type="text/javascript" src="js/multiSelect.js"></script>
</head>
<body>
<button onclick="printPage()" style="float: right;" id="button">打印</button>
<form id="fm" style="width: 1200px">
    <h2 align=" center" id="title">项目奖励申报</h2>
    <p>申请日期： <span id="crtDate"></span></p>
    <table border="1" style="border-collapse: collapse;width: 100%">
        <tr>
            <td>项目名称</td>
            <td><input class="layui-input" name="title"></td>
            <td>项目领域</td>
            <td><input class="layui-input" name="area"></td>
        </tr>
        <tr>
            <td>预计扶持资金</td>
            <td><input class="layui-input" name="preMoney"></td>
            <td>申请奖励金额</td>
            <td><input class="layui-input" name="money"></td>
        </tr>
        <tr>
            <td>项目实施周期</td>
            <td><input class="layui-input" name="days"></td>
            <td>项目组长</td>
            <td><input class="layui-input" name="mainUser"></td>
        </tr>
        <tr>
            <td>申请人</td>
            <td><input class="layui-input" name="userName"></td>
            <td>部门</td>
            <td><input class="layui-input" name="department"></td>
        </tr>
        <tr>
            <td>外部服务机构</td>
            <td><input class="layui-input" name="outDep"></td>
            <td>参与成员:</td>
            <td id="annex">
                <button type="button" class="layui-btn" id="test1" onclick="chooseFile()">
                    <i class="layui-icon">&#xe67c;</i>请上传参与成员excel
                </button>
                <span id="fileName"></span>
            </td>
        </tr>
        <tr>
            <td>
                <button type="button" class="layui-btn" id="testList" style="display: inline-block">
                    <i class="layui-icon">&#xe67c;</i>项目附件
                </button>
                <div id="testList2">项目附件</div>
            </td>
            <td id="reportUrl" colspan="5">
                <!--<button type="button" class="layui-btn" id="report" onclick="chooseReport()">-->
                <!--<i class="layui-icon">&#xe67c;</i>请上传报告pdf-->
                <!--</button>-->
                <!--<span id="reportName"></span></td>-->
                <div class="layui-upload-list">
                    <table class="layui-table">
                        <colgroup>
                            <col>
                            <col width="150">
                            <col width="260">
                            <col width="150">
                        </colgroup>
                        <thead>
                        <tr id="table-head">
                            <th>文件名</th>
                            <th>大小</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="demoList"></tbody>
                    </table>
                </div>

        </tr>
        <tr>
            <td>预计达成效果</td>
            <td colspan="5"><textarea class="layui-textarea" name="reason"></textarea></td>
        </tr>
        <tr>
            <td>其他备注说明</td>
            <td colspan="5"><textarea class="layui-textarea" name="comment"></textarea></td>
        </tr>

    </table>
</form>
</body>
<script>
    var uploadList = [], uploadListIns, loadIns,chooseSize=0;
    layui.use(['upload', 'element'], function () {
        var upload = layui.upload;
        var element = layui.element;
        //演示多文件列表
        uploadListIns = upload.render({
            elem: '#testList'
            , elemList: $('#demoList') //列表元素对象
            , url: '/office/file/uploadFile'
            , accept: 'file'
            ,exts:'pdf|jpg|png|gif|bmp|jpeg|doc|docx|xlsx|xls'
            ,size:1024*10
            , multiple: true
            , number: 5
            , auto: false
            , choose: function (obj) {
                chooseSize+=1;
                var that = this;
                var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                //读取本地文件
                obj.preview(function (index, file, result) {
                    var tr = $(['<tr id="upload-' + index + '">'
                        , '<td>' + file.name + '</td>'
                        , '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>'
                        , '<td>'
                        , '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                        , '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                        , '</td>'
                        , '</tr>'].join(''));

                    //单个重传
                    tr.find('.demo-reload').on('click', function () {
                        obj.upload(index, file);
                    });

                    //删除
                    tr.find('.demo-delete').on('click', function () {
                        delete files[index]; //删除对应的文件
                        tr.remove();
                        chooseSize-=1;
                        uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                    });

                    that.elemList.append(tr);
                    element.render('progress'); //渲染新加的进度条组件
                });
            }
            , done: function (res, index, upload) { //成功的回调
                uploadList.push({md5Name: res.obj.storeName, fileName: res.obj.fileName});
                var that = this;
                //if(res.code == 0){ //上传成功
                var tr = that.elemList.find('tr#upload-' + index)
                    , tds = tr.children();
                tds.eq(3).html(''); //清空操作
                delete this.files[index]; //删除文件队列已经上传成功的文件
                return;
                //}
                this.error(index, upload);
            }
            ,before:function() {
                actionFlag=true;
                loadIns=layer.load();
            }
            , allDone: function (obj) { //多文件上传完毕后的状态回调
                layer.close(loadIns);
                if (obj.total === obj.successful) {
                    var url = "/office/flowWork/addMoneyFlow?mask=true";
                    var param = getSubmitParam();
                    param.userId = getUserId();
                    param.title = param.title || $("#title").text();
                    param.annex = annex;
                    param.fileName = annexName;
                    param.bizList = JSON.stringify(uploadList)
                    doSubmit(url, param);
                    return false;
                } else {
                    showAlert('文件上传失败，请重新添加')
                    return false
                }
            }
            , error: function (index, upload) { //错误回调
                var that = this;
                var tr = that.elemList.find('tr#upload-' + index)
                    , tds = tr.children();
                tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
            }
        });
    })
    var annex = "", annexName = "";
    $(function () {
        var id = getUrlParam();
        if (id) {
            drawApprove(id);
            //审批进入
            $("input").prop('readonly', true);
            $("#app").hide();
            $(".layui-layer-btn").hide();
            $.post('/office/flowStepInstance/queryDetail', {id: id}, function (res) {
                if (res.code == 200) {
                    var data = res.obj;
                    drawForm(data, $("#fm"));
                    $("#crtDate").text(formatDate(new Date(data.crtDate)));
                    if (res.obj.annex) {
                        $("#annex").html(`<a href="#" style="color: blue;text-decoration: underline" onclick="showAnnex('${res.obj.annex}')">${res.obj.fileName}</a>`)
                    }
                    if (res.obj.bizList) {
                        var html = '';
                        res.obj.bizList.forEach(item => {
                            html += `<a href="#" style="color: blue;text-decoration: underline" onclick="showAnnex('${item.storeName}')">${item.fileName}</a></br>`
                        })
                        $("#demoList").html(html)
                        $("#testList2").show();
                        $("#testList").hide();
                        $("#demoList").html(html)
                        $("#table-head").html('')
                    }
                }
            })
        } else {
            $("#testList2").hide();
            $("#testList").show();
            drawAdd();
            var html = ' <button onclick="addExecute()">添加执行人</button>';
            $(html).appendTo("#designButtonList");
            var today = formatDate(new Date())
            $("#crtDate").text(today);
            $("[name='userName']").val(getUserName());
            $("[name='department']").val(getOrgName());
            //渲染流程
            $.post('/office/flowStepTemplate/getTemplateStep', {userId: getUserId(), templateId: 10}, function (res) {
                if (res.code == 200) {
                    if (res.obj) {
                        drawFlowStep(res.obj.flowNodes);
                    }
                }
            })
        }
    })
    var actionFlag=false;
    function submitForm() {
        if(clickFlag){
            showAlert('当前页面已提交，请刷新后再次提交');
            return false;
        }
        var validateArr=['title','area','money','mainUser','mainUser','reason'];//必填字段
        var flag=false;
        validateArr.forEach(item=>{
           let value= $(`[name='${item}']`).val();
           if(!value){
               flag=true
               $(`[name='${item}']`).css('border','1px solid red')
           }else{
               $(`[name='${item}']`).css('border','')
           }
        })
        if (flag) {
            showAlert('请补全报告描述后提交哦');
            return false;
        }
        if(!chooseSize){
            showAlert('项目附件不能为空');
            return false;
        }
        layer.confirm('确认提交',function () {
            uploadListIns.upload();
        })
    }

    function chooseFile() {
        var input = document.createElement("input");
        input.type = "file";
        input.click(); //代码执行到这里，本地文件选择框便会打开！
        input.onchange = function () {
            cbAnnexFile = input.files[0];
            if (cbAnnexFile.name.indexOf('xls') == -1 &&
                cbAnnexFile.name.indexOf('xlsx') == -1 &&
                cbAnnexFile.name.indexOf('cvs') == -1) {
                showAlert('项目成员请上传xls,xlsx,cvs格式文件');
                return false;
            }
            $("#fileName").text(cbAnnexFile.name);
            layer.confirm('是否确定上传' + cbAnnexFile.name + '?', function (i) {
                var formData = new FormData();
                formData.append("file", cbAnnexFile);
                var result = uploadFile(formData);
                if (result.code == 200) {
                    annex = result.obj.storeName;
                    annexName = result.obj.fileName;
                    showMsg('上传成功');
                    layer.close(i);
                }
            })
        };
    }

    // function chooseReport() {
    //     var input = document.createElement("input");
    //     input.type = "file";
    //     input.click(); //代码执行到这里，本地文件选择框便会打开！
    //     input.onchange = function () {
    //         cbAnnexFile = input.files[0];
    //         if (cbAnnexFile.name.indexOf('.pdf') == -1) {
    //             showAlert('请将项目报告转成pdf格式后上传，推荐转换pdf网址:https://app.xunjiepdf.com/');
    //             return false;
    //         }
    //         $("#reportName").text(cbAnnexFile.name);
    //         layer.confirm('是否确定上传' + cbAnnexFile.name + '?', function (i) {
    //             var formData = new FormData();
    //             formData.append("file", cbAnnexFile);
    //             var result = uploadFile(formData);
    //             if (result.code == 200) {
    //                 reportUrl = result.obj.url;
    //                 reportName = result.obj.fileName;
    //                 showMsg('上传成功');
    //                 layer.close(i);
    //             }
    //         })
    //     };
    // }

    function printPage() {
        window.print();
    }

    var beforePrint = function () {
        $("#button").hide();
        $("#notice").hide();

    };

    var afterPrint = function () {
        $("#button").show();
        $("#notice").show();
    };

    if (window.matchMedia) {   //返回一个新的 MediaQueryList 对象，表示指定的媒体查询字符串解析后的结果。
        var mediaQueryList = window.matchMedia('print');
        mediaQueryList.addListener(function (mql) {
            if (mql.matches) {
                beforePrint();
            } else {
                afterPrint();
            }
        });
    }

    window.onbeforeprint = beforePrint;
    window.onafterprint = afterPrint;

</script>

</html>